<script setup lang="ts">
  import dayjs from "dayjs";
  import { ArrowRight } from "@element-plus/icons-vue";

  import { ref, onMounted } from "vue";
  import { useRoute } from "vue-router";

  import { getOrderList, type OrderList } from "@/api/order";

  const BREADLIST = [
    { name: "用户中心", path: "#" },
    { name: "订单记录", path: "/user/order" },
  ];

  /** 通过路由-获取礼品ID */
  const route = useRoute();
  const id = ref(route.params.id);

  /** 收货信息弹窗 */
  const dialogVisible = ref(false);

  const orderList = ref([] as Array<OrderList>);
  const total = ref();
  let pageSize = ref(1);

  /** 翻页方法 */
  let changePageSize = (val) => {
    pageSize.value = val;
    getPageList(val);
    window.scrollTo({
      top: 0,
    });
  };

  /** 时间格式化 */
  const formatTime = (time) => {
    return dayjs(time).format("YYYY-MM-DD");
  };

  /** 获取订单列表 */
  let getPageList = (pageNum = 1) => {
    getOrderList(pageNum).then((res) => {
      console.log(res);
      orderList.value = res.data.orderlist;
      total.value = res.data.total;
    });
  };

  onMounted(() => {
    getPageList();
  });
</script>

<template>
  <el-breadcrumb :separator-icon="ArrowRight" class="pb-[12px]">
    <el-breadcrumb-item v-for="item in BREADLIST" :to="item.path">{{
      item.name
    }}</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="w-full flex flex-col">
    <!-- 订单标题 -->
    <el-card class="order-title flex-1 " shadow="never">
      <div>订单列表</div>
    </el-card>

    <!-- 订单卡片 -->
    <el-card
      class="flex-1 order-card mb-[6px]"
      v-for="order in orderList"
      shadow="never"
    >
      <div class="bg-white overflow-hidden">
        <!-- 订单表格 -->
        <table class="min-w-full divide-y divide-gray-200 overflow-x-auto">
          <tbody class="bg-white divide-y divide-gray-200">
            <!-- 订单首行信息 -->
            <tr class="bg-gray-50">
              <td
                colspan="3"
                class="text-[14px] px-4 py-3 text-left font-medium text-gray-500 uppercase tracking-wider"
              >
                <div class="flex justify-between text-[12px]">
                  <div>
                    <span>{{ formatTime(order.orderdate) }}</span>
                  </div>
                  <div>
                    <span>{{ order.logisticsstatus }}</span>
                  </div>
                  <div>
                    <a
                      :href="'/#/user/order/' + order.orderno"
                      class="no-underline text-blue-600"
                      title="点击查看订单详情"
                      ><span>{{ order.orderno }}</span></a
                    >
                  </div>
                </div>
              </td>
            </tr>

            <!-- 订单商品信息 -->
            <tr class="text-[14px]" v-for="item in order.productinfo">
              <td class="px-4 py-4 text-wrap w-[200px] sm:w-[300px]">
                <div class="flex flex-col md:flex-row md:items-center">
                  <div class="pb-[4px] md:pb-0 flex-1">
                    {{ item.fgoodname }}
                  </div>
                  <div
                    class="text-[12px] text-gray-500 md:ml-[10px] text-nowrap"
                  >
                    货号: <span>{{ item.fgoodcode }}</span>
                  </div>
                </div>
              </td>
              <td class="px-4 py-4 text-nowrap md:text-center">
                <div>
                  数量: <span>{{ item.fquantity }}</span>
                </div>
              </td>
              <td class="px-4 py-4 text-nowrap md:text-center">
                <div>
                  总价:
                  <span>{{ (item.fquantity, item.fbidprice) }}</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>

  </div>
</template>

<style lang="scss" scoped>
  .order-title{
    border-bottom: 0;
  }
  .order-title > :deep(.el-card__body) {
    padding: 12px;
  }
  .order-card > :deep(.el-card__body) {
    padding: 0;
  }


  .text {
    justify-content: space-between;
  }
</style>
<!-- https://blog.csdn.net/Oracle475/article/details/136823070 -->
